Transforming ideas into impact

Synergetic Consulting

Strategy, creativity and technology working together to grow your brand.

Performance‑driven marketing

Integrated Digital Solutions

From SEO to paid media, every channel aligned to deliver measurable ROI.

From challenge to success

Let’s Flip Your Brand Story

Powerful content, design and tech that connect with your audience.

.hero-fullscreen { position:relative; min-height:100vh; padding:0; /* no extra vertical padding */ margin-top:0; /* in case any global section margin is applied */ overflow:hidden; } /* each slide uses background image */ .hero-slide-bg { position:relative; height:600px; background-size:cover; background-position:center; background-repeat:no-repeat; } /* set your images here */ .hero-bg-1 { background-image: url("../img/graphic.jpg"); } .hero-bg-2 { background-image: url("../img/seo.jpg"); } .hero-bg-3 { background-image: url("../img/digital.jpg"); } /* dark gradient overlay so text is readable */ .hero-overlay { position: absolute; inset: 0; background: radial-gradient(circle at left center, rgba(0,0,0,0.65), transparent 55%), linear-gradient(120deg, rgba(0,0,0,0.7), rgba(0,0,0,0.85)); } /* content centered vertically, aligned left */ .hero-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 700px; color: #fff; } .hero-tagline { text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.8rem; margin-bottom: 10px; color: #f5c86b; } .hero-heading { font-size: clamp(2.4rem, 3vw + 1.4rem, 3.6rem); font-weight: 700; line-height: 1.1; margin-bottom: 16px; opacity: 0; transform: translateY(24px); } .hero-gradient-text { background: linear-gradient(120deg,#f5c86b,#ff9a3c,#ff4d67); -webkit-background-clip: text; color: transparent; } .hero-subtext { font-size: 1.02rem; max-width: 480px; margin-bottom: 22px; opacity: 0; transform: translateY(18px); } .hero-cta, .hero-cta-alt { opacity: 0; transform: translateY(18px); } /* animate text when slide is active */ .carousel-item.active .hero-heading { animation: heroTitleIn 0.7s ease-out 0.1s forwards; } .carousel-item.active .hero-gradient-text { animation: heroGlow 1.3s ease-out 0.3s forwards; } .carousel-item.active .hero-subtext { animation: heroTextIn 0.7s ease-out 0.25s forwards; } .carousel-item.active .hero-cta, .carousel-item.active .hero-cta-alt { animation: heroBtnIn 0.6s ease-out 0.4s forwards; } /* circular indicators */ .hero-indicators { bottom: 24px; } .hero-indicators button { width: 11px; height: 11px; border-radius: 50%; border: none; background-color: rgba(255,255,255,0.45); margin: 0 5px; transition: transform 0.2s ease, background-color 0.2s ease; } .hero-indicators .active { background-color: #f5c86b; transform: scale(1.5); } /* side circular arrows */ .hero-control { width: 70px; } .hero-arrow { width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.6); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; transition: background-color 0.25s ease, transform 0.25s ease, border-color 0.25s ease; } .hero-arrow-left { margin-left: 12px; } .hero-arrow-right { margin-right: 12px; } .hero-arrow:hover { background-color: rgba(245,200,107,0.25); border-color: #f5c86b; transform: scale(1.05); } /* smoother cross-fade between slides */ .carousel.carousel-fade .carousel-item { transition: opacity 1s ease-in-out; } /* keyframes */ @keyframes heroTitleIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroTextIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroBtnIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroGlow { 0% { text-shadow: 0 0 0 rgba(245,200,107,0); } 50% { text-shadow: 0 0 22px rgba(245,200,107,0.9); } 100% { text-shadow: 0 0 6px rgba(245,200,107,0.5); } } /* ------------ tablet (≤ 992px) ------------ */ @media (max-width: 991.98px){ .hero-fullscreen{ min-height:0; height:auto; padding:80px 0 40px; /* space below navbar, smaller bottom */ } .hero-slide-bg{ height:auto; /* let content decide height */ padding:80px 0 60px; /* internal spacing instead of fixed height */ } .hero-inner{ max-width:100%; padding:0 16px; /* side padding so text doesn’t touch edges */ } .hero-heading{ font-size:2.1rem; } .hero-subtext{ max-width:100%; } .hero-control{ display:none; /* hide side arrows on tablet/mobile */ } } /* ------------ small mobiles (≤ 576px) ------------ */ @media (max-width: 575.98px){ .hero-fullscreen{ padding:70px 0 40px; } .hero-slide-bg{ padding:70px 0 50px; } .hero-heading{ font-size:1.9rem; } .hero-tagline{ font-size:0.72rem; letter-spacing:0.18em; } .hero-subtext{ font-size:0.9rem; } } /* ------------ very small width (≤ 375px) ------------ */ @media (max-width: 375px){ .hero-fullscreen{ padding:65px 0 36px; margin-top:0; } .hero-slide-bg{ padding:65px 0 46px; } } /* Responsive tweaks */ @media (max-width: 991.98px) { .hero-fullscreen { height: auto; min-height: 0; padding: 90px 0 60px; } .hero-inner { max-width: 100%; } .hero-heading { font-size: 2.1rem; } .hero-subtext { max-width: 100%; } .hero-control { display: none; /* hide side arrows on small screens if you want */ } }

Your details are safe with us.